<template>
	<statusBarVue title="设置" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="personal-page" :style="pageHaveBarStyle">
		<view class="personal-page-group">
			<uni-list>
				<uni-forms ref="form" :model="formData" :rules="rules" label-position="top" class="form" label-width="120px"
					:border="true">
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="头像" name="photo" required></uni-forms-item>
						</template>
						<template v-slot:footer>
							<uni-file-picker :imageStyles="imageStyles" class="slot-image" :limit="1" :del-icon="false"
								disable-preview file-mediatype="image" @select="select"
								:value="formData.photo">选择</uni-file-picker>
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="昵称" name="nick" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.nick" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="性别" name="gender" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<picker :value="formData.gender" :range="genderTypeListArr"
								@change="(e) => this.formData.gender = e.detail.value">
								<text style="margin-right: 10px;"
									:class="(formData.gender !== undefined) ? '' : 'placeholder'">
									{{ (formData.gender !== undefined) ? genderTypeListArr[formData.gender] : '请选择性别' }}
								</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</picker>
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="年龄" name="age" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.age" type="number" primaryColor="#22A366"
								:inputBorder="false" />
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="手机号" name="phone" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.phone" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="邮箱" name="email" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.email" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="地址" name="area" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<picker :value="formData.area" mode="region" @change="e => { this.formData.area = e.detail; }">
								<text :class="(Array.isArray(formData.area.value)) ? 'content' : 'placeholder'">
									{{ (Array.isArray(formData.area.value)) ? (formData.area.value).join(',') : '请选择' }}
								</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</picker>
						</template>
					</uni-list-item>
				</uni-forms>
			</uni-list>
		</view>
		<view class="personal-page-group  add-btns">
			<button style="color:#ffffff;backgroundColor:#22A366;" @click="handleSave">保存</button>
		</view>
	</view>
</template>

<script>
import tool_oss from '@/utils/oss';

import statusBarVue from '@/components/statusBar.vue';

import {
	getCheckContactsList,
	postAddContacts,
	postDelContact,
	postEditProducts,
	getEditProducts,
	postLocation
} from '@/utils/api.js';

import {
	publics
} from '@/mixins/publics.js';

export default {
	mixins: [publics],
	components: {
		statusBarVue
	},
	data() {
		return {
			imageStyles: {
				width: 64,
				height: 64,
				border: {
					radius: '50%'
				}
			},
			fileLists: [{
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
				extname: 'png',
				name: 'shuijiao.png'
			}],
			genderTypeListArr: ['男', '女'],
			rules: {
				nick: {
					rules: [{
						required: true,
						errorMessage: '昵称不能为空',
					}]
				},
				age: {
					rules: [{
						required: true,
						errorMessage: '年龄不能为空',
					},
					{
						format: 'number',
						errorMessage: '年龄只能输入数字'
					}
					]
				},
				gender: {
					rules: [{
						required: true,
						errorMessage: '性别不能为空',
					}]
				},
				phone: {
					rules: [{
						required: true,
						errorMessage: '手机号不能为空',
					}, {
						validateFunction: function (rule, value, data, callback) {
							const phonePattern = /^1\d{10}$/;
							// debugger
							if (!(phonePattern.test(value))) {
								callback('手机号码格式错误')
							}
							return true
						}
					}]
				},
				email: {
					rules: [{
						required: true,
						errorMessage: '邮箱不能为空',
					}, {
						format: 'email',
						errorMessage: '邮箱格式错误'
					}]
				},
				area: {
					rules: [{
						required: true,
						errorMessage: '地址不能为空'
					}]
				}
			},
			formData: {
				area: {}
			}
		}
	},
	onShow() {
		const userInfo = this.userInfo;

		if (userInfo.id) {
			this.getEditProductsApi()
			this.getCheckContactsListApi(1)
			this.getCheckContactsListApi(2)
		} else {
			uni.showModal({
				title: '提示',
				content: '请登录后操作',
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: `/pages/login/index`
						});
					}
				}
			});
		}
	},
	methods: {
		// 获取用户信息
		getEditProductsApi() {
			getEditProducts().then(res => {
				if (res.code === 200) {
					const userObj = res.data.user;
					uni.setStorageSync(
						'_userInfo',
						userObj
					);

					this.formData.nick = userObj.nick;
					this.formData.age = userObj.age;
					this.formData.gender = userObj.gender;
					this.formData.area.value = (userObj.area.name).split(',');
					this.formData.area.code = userObj.area.lid;
					this.formData.photo = this.handleGetFileInfo(userObj.avatar);
				}
			})
		},

		// 保存用户信息
		postEditProductsApi(postData) {
			postEditProducts(postData).then(res => {
				if (res.code === 200) {
					uni.showModal({
						title: '提示',
						content: '操作成功！',
						success: function (res) {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					});
				}
			})
		},
		// 获取上传状态
		select(e) {
			tool_oss.oss.upload(e.tempFiles).then(res => {
				this.formData.photo = res.fileUploadSuccessObj;
			});
		},

		handleSave() {
			this.$refs.form.validate((err, formData) => {
				if (!err) {
					let postData = {
						age: formData.age,
						avatar: formData.photo.url,
						gender: Number(formData.gender),
						nick: formData.nick
					};
					this.postEditProductsApi(postData);

					// 没有数据变化 不请求
					if (formData.phone !== this.userInfo.phone) {
						this.postAddContactsApi({
							contact_type: 1,
							value: String(formData.phone)
						});
					}

					if (formData.email !== this.userInfo.email) {
						this.postAddContactsApi({
							contact_type: 2,
							value: formData.email
						});
					}

					const areaCode = Array.isArray((formData.area.code)) ? Number((formData.area.code).slice(-1)[0]) : formData.area.code;
					if (areaCode !== this.userInfo.area.lid) {
						this.postLocationApi({
							lid: areaCode,
							name: (formData.area.value).join(',')
						})
					}

				}
			})
		},

		// 删除联系方式
		postDelContactApi(cid) {
			postDelContact(cid).then(res => {
				if (res.code === 200) {

				}
			})
		},

		// 添加联系方式
		postAddContactsApi(data) {
			postAddContacts(data).then(res => {
				if (res.code === 200) {
					if (data.contact_type === 1) {
						this.userInfo.phone = data.value;
					}
					if (data.contact_type === 2) {
						this.userInfo.email = data.value;
					}
				}
			})
		},

		// 查看联系方式
		getCheckContactsListApi(cid) {
			getCheckContactsList(cid).then(res => {
				if (res.code === 200) {
					const arrLength = res.data.contacts.length;
					if (res.data.contacts[arrLength - 1].value) {
						if (cid === 1) {
							this.formData.phone = res.data.contacts[arrLength - 1].value;
							this.userInfo.phone = res.data.contacts[arrLength - 1].value;
						}
						if (cid === 2) {
							this.formData.email = res.data.contacts[arrLength - 1].value;
							this.userInfo.email = res.data.contacts[arrLength - 1].value;
						}
					}
				}
			})
		},

		// 设置用户的行政区划地址
		postLocationApi(postData) {
			postLocation(postData).then(res => {
				if (res.code === 200) {
					this.userInfo.area.name = postData.name;
					this.userInfo.area.lid = postData.lid;
				}
			})
		}
	}
}
</script>

<style lang="scss">
.personal-page {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: #F2F3F7;
	padding: 10px 2.66vw;
	box-sizing: border-box;

	.placeholder,
	.content {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #A5A5A7;
		margin-right: 10px;

		&.content {
			color: #1E1F23;
		}
	}

	&-group {
		margin-bottom: 15px;

		.uni-forms-item.is-direction-top .uni-forms-item__label {
			line-height: inherit;
			height: auto;
			padding: 0;
			font-weight: bold;
		}

		.uni-forms-item--border {
			padding: 0;
			border: none;
		}

		.uni-list-item__content-title {
			height: auto;
			font-family: PingFangSC-SNaNpxibold;
			font-weight: bold;
			font-size: 14px;
			color: #606266;
		}

		.list-item {
			.uni-list-item__container {
				height: 35px;
				line-height: 35px;
			}
		}

		.uni-easyinput {
			text-align: right;
		}

		.uni-list-item__container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&-title {
				font-size: 16px;
			}
		}

		.uni-file-picker__container {
			justify-content: flex-end;
		}
	}
}
</style>